<template>
  <back-dialog-base
    :title="title"
    :visible="visibleAddDialog"
    width="720px"
    @onCommit="handleSubmit"
    :destroy-on-close="true"
     @close="clearItem"
  >
    <template #content>
      <div class="content-wrap">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="96px">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="工程名称：" prop="projectName">
                <el-input v-model="form.projectName"></el-input>
              </el-form-item>
              <el-form-item label="所属管廊：" prop="pipeId">
                <el-select v-model="form.pipeId" placeholder=" ">
                  <el-option
                    v-for="item in pipeList"
                    :key="item.id"
                    :label="item.pipeName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属仓室：" prop="storehouseId">
                <el-select v-model="form.storehouseId" placeholder=" ">
                  <el-option
                    v-for="item in storeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="防火分区：" prop="subregionNames">
                <div style="width: 230px">
                  <el-checkbox-group v-model="checkAll">
                    <el-checkbox
                      v-for="item in subRegionList"
                      :key="item.id"
                      :label="item.name"
                      @change="handleChecked($event, item.id, item.name)"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管线类型：" prop="type">
                <el-input v-model="form.type" style="width: 208px"></el-input>
              </el-form-item>
              <el-form-item label="道路范围：" prop="roadRange">
                <el-input
                  v-model="form.roadRange"
                  style="width: 208px"
                ></el-input>
              </el-form-item>
              <el-form-item label="申报单位：" prop="unit">
                <el-input v-model="form.unit" style="width: 208px"></el-input>
              </el-form-item>
              <el-form-item label="开工日期：" prop="startWorkDate">
                <el-date-picker
                  v-model="form.startWorkDate"
                  type="datetime"
                  placeholder=" "
                  format="YYYY/MM/DD hh:mm:ss"
                  value-format="YYYY-MM-DD h:m:s "
                  style="width: 208px"
                />
              </el-form-item>
              <el-form-item label="竣工日期：" prop="endWorkDate">
                <el-date-picker
                  v-model="form.endWorkDate"
                  type="datetime"
                  placeholder=" "
                  format="YYYY/MM/DD hh:mm:ss"
                  value-format="YYYY-MM-DD h:m:s "
                  style="width: 208px"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import {
  pipeInfoList,
  pipeStorehouserList,
  pipeSubregionInfoList,
  savePipeApply
} from '@/api/pipeline'
import { message } from '@/utils/message'

const pipeList = ref({})
const storeList = ref([])
const subRegionList = ref([])
const checkAll = ref([])
const checkArr = reactive([])
const regionids = ref('')
const regionnames = ref('')
const regionList = { id: '', name: '' }
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleAddDialog: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['onReload'])
const formRef = ref(null)
const form = reactive({
  projectName: '',
  pipeId: '',
  storehouseId: '',
  subregionIds: regionids,
  subregionNames: regionnames,
  type: '',
  roadRange: '',
  unit: '',
  startWorkDate: '',
  endWorkDate: ''
})
const rules = reactive({
  projectName: [
    {
      required: true,
      message: '工程名称不能为空',
      trigger: 'blur'
    }
  ],
  pipeId: [
    {
      required: true,
      message: '所属管廊不能为空',
      trigger: 'blur'
    }
  ],
  storehouseId: [
    {
      required: true,
      message: '所属仓室不能为空',
      trigger: 'blur'
    }
  ],
  subregionNames: [
    {
      required: true,
      message: '防火分区不能为空',
      trigger: 'blur'
    }
  ],
  type: [
    {
      required: true,
      message: '管线类型不能为空',
      trigger: 'blur'
    }
  ],
  roadRange: [
    {
      required: true,
      message: '道路范围不能为空',
      trigger: 'blur'
    }
  ],
  unit: [
    {
      required: true,
      message: '申报单位不能为空',
      trigger: 'blur'
    }
  ],
  startWorkDate: [
    {
      required: true,
      message: '开工日期不能为空',
      trigger: 'blur'
    }
  ],
  endWorkDate: [
    {
      required: true,
      message: '竣工日期不能为空',
      trigger: 'blur'
    }
  ]
})

// 获取管廊下拉数据
const getPipeInfoList = async () => {
  const res = await pipeInfoList()
  pipeList.value = res
}
getPipeInfoList()

// 获取仓库下拉数据
const getStoreList = async () => {
  const res = await pipeStorehouserList()
  storeList.value = res
}
getStoreList()

// 获取防火分区下拉数据
const getSubregionList = async () => {
  const res = await pipeSubregionInfoList()
  subRegionList.value = res
}
getSubregionList()

// 多选区
const handleChecked = (event, id, name) => {
  regionList.id = ''
  regionList.name = ''
  if (event) {
    if (regionids.value.length === 0) {
      regionids.value += id
      regionnames.value += name
    } else {
      regionids.value += ',' + id
      regionnames.value += ',' + name
    }
  } else {
    regionids.value = regionids.value.replace(id, '')
    regionnames.value = regionnames.value.replace(name, '')
  }
}

const clearItem = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
 form.projectName = ''
  form.pipeId = ''
  form.storehouseId = ''
  form.subregionIds = ''
  form.subregionNames = ''
  form.type = ''
  form.roadRange = ''
  form.unit = ''
  form.startWorkDate = ''
  form.endWorkDate = ''
  checkAll.value = []
}

const handleSubmit = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      save(form)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const save = async (data) => {
  const res = await savePipeApply(data)
  if (res && res.id) {
    message({ type: 'success', message: '添加成功!' })
    clearForm()
    emits('onReload')
  }
}

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.projectName = ''
  form.pipeId = ''
  form.storehouseId = ''
  form.subregionIds = ''
  form.subregionNames = ''
  form.type = ''
  form.roadRange = ''
  form.unit = ''
  form.startWorkDate = ''
  form.endWorkDate = ''
}
</script>

<style lang="scss" scoped>
.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 13px;
  .time-outer {
    .el-input {
      width: 140px;
      padding-right: 10px;
    }
  }
  .right-form {
    span {
      width: 26px;
      height: 15px;
    }
  }
}
.font {
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #333333;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
  width: 100%;
}

.el-input {
  width: 208px;
}
.el-select {
  width: 208px;
}
</style>
